<template>
  <div class="user-info">
    <x-header>
      个人资料
    </x-header>
    <group>
      <cell title="姓名" :value="userInfo.UserName"></cell>
      <x-input title="联系方式1" v-model="userInfo.Mobile1"></x-input>
      <x-input title="联系方式2" v-model="userInfo.Phone1"></x-input>
      <x-input title="联系方式3" v-model="userInfo.Phone2"></x-input>
      <x-input title="公司" v-model="userInfo.CompanyName"></x-input>
      <x-address title="地址" v-model="userInfo.Address" raw-value :list="addressData" @on-shadow-change="onShadowChange"></x-address>
      <x-textarea title="备注" v-model="userInfo.Memo" placeholder="这个人很懒，什么都没有..."></x-textarea>
    </group>
    <box gap="10px 10px">
      <x-button @click.native="onSubmit" type="primary">保存</x-button>
    </box>
  </div>
</template>

<script>
import {
  XHeader,
  Cell,
  Group,
  XButton,
  ChinaAddressData,
  XAddress,
  XInput,
  XTextarea,
  Box
} from 'vux'
import {
  getUserInfo
} from '../../api/api'
export default {
  name: 'user-info',
  components: {
    XTextarea,
    XHeader,
    Cell,
    Group,
    XButton,
    XAddress,
    XInput,
    Box
  },
  data () {
    return {
      addressData: ChinaAddressData,
      userInfo: {
        UserName: '',
        Mobile1: '',
        Phone1: '',
        Phone2: '',
        CompanyName: '',
        Address: [],
        Memo: ''
      }
    }
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    onSubmit () {

    },
    getUserInfo () {
      getUserInfo({}).then(res => {
        if (res.status === 200) {
          this.userInfo = res.data[0]
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less">
  .user-info{

  }
</style>
